<template>
  <div class="tabr">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="发布文章" name="first">
        <el-scrollbar height="100vh">
          <articlePage />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="管理文章" name="second">
        <el-scrollbar height="100vh">
          <card :info="data.info"/>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="上传图片" name="third">
        <photo />
      </el-tab-pane>
      <el-tab-pane label="管理图片" name="fourth">
        <el-scrollbar height="100vh">
        <editPhoto />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="管理留言" name="fifth">
        <el-scrollbar height="100vh">
          <Book :book="false"/>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import card from "@/components/card.vue"
import photo from "@/components/photo.vue"
import Book from "@/components/book.vue"
import articlePage from "./articlePage.vue";
import editPhoto from "./editPhoto.vue";
import URL from '@/api/url.js'
import { useRouter} from 'vue-router'
import { useHomeStore} from '@/stores/home.js'
const store = useHomeStore()
const router = useRouter()
import { ref,reactive,onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import axios from "axios";

const activeName = ref("first");
const data = reactive({
    info:{
        show:true,
        path:'',
    }
})
onMounted(()=>{
  axios.post(URL()+'/user/login',{
    username:store.username,
    password:store.password,
  }).then(item=>{
    if(item.data.code !== 20000){
      router.push('/home')
    }
  })
})

</script>
<style>
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 15px;
}
</style>